css增强了逻辑性和计算能力，比如css变量和一些动态函数（使用场景：主题的切换、响应式设计、交互式动画）
css变量（也称为自定义变量），是一种动态存储和复用值的机制，他让样式管理更加的灵活、可维护
变量可理解为一个容器，里面可以存放数据

variable
定义变量： --变量名
            eg.  --color: #222222;
使用变量： var(--变量名)
            eg.  var(--color)

作用域：变量的作用范围，哪个区域有效
    定义变量：
        :root { #全局变量
            --color: #222;
        }
        .box { #局部变量:当前元素及其子元素
            --bground: pink;
        }

css3计算能力
calc()函数可以执行数学运算，支持混合单位，写的时候一定注意在运算符号的左右两侧一定要保留一个空格